<template>
    <div class="favorites-page">
        <h2>我的收藏</h2>
        <div class="favorites-grid" v-if="userStore.favorites.length">
            <el-card v-for="product in userStore.favorites" :key="product.id" class="favorite-item">
                <img :src="product.image" :alt="product.name" class="product-image">
                <div class="product-info">
                    <h3>{{ product.name }}</h3>
                    <p class="price">¥{{ product.price }}</p>
                    <div class="actions">
                        <el-button type="primary" size="small" @click="addToCart(product)">加入购物车</el-button>
                        <el-button type="danger" size="small" @click="removeFromFavorites(product)">取消收藏</el-button>
                    </div>
                </div>
            </el-card>
        </div>
        <el-empty v-else description="暂无收藏商品" />
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const addToCart = (product: any) => {
    userStore.addToCart(product)
}

const removeFromFavorites = (product: any) => {
    userStore.toggleFavorite(product)
}
</script>

<style scoped>
.favorites-page {
    padding: 20px;
}

h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.favorite-item {
    transition: transform 0.3s;
}

.favorite-item:hover {
    transform: translateY(-5px);
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-info {
    padding: 10px;
}

h3 {
    margin: 10px 0;
    font-size: 16px;
    color: #333;
}

.price {
    color: #f56c6c;
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
}

.actions {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
</style>